<template>
	
		<view class="page-content">
			<!-- TOP3事件 -->
			<view class="top-events">
				<view class="section-title">TOP3事件</view>
				<swiper class="event-swiper" circular :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
					<swiper-item v-for="(item, index) in topEvents" :key="index">
						<view class="event-card">
							<image class="event-image" :src="item.image" mode="aspectFill"></image>
							<view class="event-number">No.{{ index + 1 }}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 今日新闻 -->
			<view class="news-section">
				<view class="section-header">
					<text class="section-title">今日新闻</text>
					<text class="update-time">7：00准时更新</text>
				</view>
				
				<!-- 新闻列表 -->
				<view class="news-list">
					<view class="news-item" v-for="(item, index) in newsList" :key="index">
						<view class="news-content">
							<view class="news-title">{{ item.title }}</view>
							<view class="news-desc">{{ item.description }}</view>
						</view>
						<image class="news-image" :src="item.image" mode="aspectFill"></image>
						<view class="news-more"># 更多</view>
					</view>
				</view>
				
				<view class="more-news">更多资讯</view>
			</view>
		</view>
</template>

<script>
import { checkToken } from '../../src/utils/auth'

export default {
	data() {
		return {
			topEvents: [
				{ image: '/static/images/event1.jpg' },
				{ image: '/static/images/event2.jpg' },
				{ image: '/static/images/event3.jpg' }
			],
			newsList: [
				{
					title: '用高年华和同事发生争执历史',
					description: '清华毕业生在一个一线城市的科技公司，和同事因为工作上的事情发生了争执，最后上升到了人身攻击。',
					image: '/static/images/news1.jpg'
				},
				{
					title: '用高年华和同事发生争执历史',
					description: '清华毕业生在一个一线城市的科技公司，和同事因为工作上的事情发生了争执，最后上升到了人身攻击。',
					image: '/static/images/news1.jpg'
				},
				{
					title: '用高年华和同事发生争执历史',
					description: '清华毕业生在一个一线城市的科技公司，和同事因为工作上的事情发生了争执，最后上升到了人身攻击。',
					image: '/static/images/news1.jpg'
				}
			]
		}
	},
	onLoad() {

	},
	methods: {
		goToMy() {
			// 检查是否登录，决定跳转到哪个页面
			if (checkToken()) {
				uni.navigateTo({
					url: '/pages/wode-dongtai/wode-dongtai'
				})
			} else {
				uni.navigateTo({
					url: '/pages/wode-kong/wode-kong'
				})
			}
		},
		goToZhiDu() {
			// 跳转到志度页面
			uni.navigateTo({
				url: '/pages/zhidu/zhidu'
			})
		}
	}
}
</script>

<style scoped>
	.page-content {
		background-color: #f8f8f8;
	}

	.top-events {
		padding: 30rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.event-swiper {
		height: 360rpx;
	}

	.event-card {
		position: relative;
		height: 100%;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.event-image {
		width: 100%;
		height: 100%;
	}

	.event-number {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333;
	}

	.news-section {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.update-time {
		font-size: 24rpx;
		color: #999;
	}

	.news-list {
		margin-bottom: 30rpx;
	}

	.news-item {
		margin-bottom: 40rpx;
		position: relative;
	}

	.news-content {
		margin-bottom: 20rpx;
	}

	.news-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.news-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}

	.news-image {
		width: 100%;
		height: 360rpx;
		border-radius: 20rpx;
	}

	.news-more {
		position: absolute;
		bottom: -30rpx;
		right: 0;
		font-size: 24rpx;
		color: #8a2be2;
	}

	.more-news {
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}

	.tab-item.active {
		color: #8a2be2;
	}

	.tab-item .iconfont {
		font-size: 40rpx;
		margin-bottom: 4rpx;
	}
</style>
